<template>
	<view class="phone">
		<view class="getPhone">
			<view class="getPhone-logo">
				<image src="../../pagesA/static/sureorder/logo.png" mode="widthFix"
					style="width: 160rpx; height: 160rpx;"></image>
			</view>
			<view class="getPhone-tip">
				<text>请验证手机号码</text>
			</view>
			<view class="getPhone-connet">
				<view class="getPhone-connet-list">
					<view class="getPhone-connet-list-input">
						<input type="number" placeholder="请输入手机号码" style="width: 90%; height: 100%; "
							@input="inputphone">
					</view>
				</view>
				<view class="getPhone-connet-list">
					<view class="getPhone-connet-list-input">
						<input type="number" placeholder="请输入验证码" style="width: 60%; height: 100%;" @input="inputcode">
						<view class="getPhone-connet-list-input-right" @click="getcode()" :class="{color: color}">
							<text>{{tips}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="getPhone-bottom">
				<view class="getPhone-bottom-button" @click="closephone()">
					<text>取消</text>
				</view>
				<view class="getPhone-bottom-button" style="background-color: red; color: white;" @click="surephone()">
					<text>确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			phoneview: {},
		},
		data() {
			return {
				phone: '',
				phonevalue: '',
				codevalue: '',
				userinfo: '',
				tips: '获取验证码',
				color: false
			}
		},
		onLoad() {
			// uni.getStorage({
			// 	key:'userinfo',
			// 	success: (res) => {
			// 		this.userinfo = res.data
			// 	}
			// })
		},
		watch: {
			phoneview(e) {
				this.userinfo = e.data
				console.log(this.userinfo)

			},
		},
		methods: {
			inputphone(e) {
				this.phonevalue = e.detail.value
			},
			inputcode(e) {
				this.codevalue = e.detail.value
			},
			getcode() {
				if (this.color) {
					return
				}
				console.log(this.phoneview)
				let Exgphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				let i = 60
				if (!Exgphone.test(this.phonevalue)) {
					return uni.showToast({
						icon: 'none',
						title: '手机号码不正确'
					})
				}
				let t = setInterval(() => {
					i--;
					this.color = true;
					this.tips = i;
					if (i == 0) {
						clearInterval(t);
						this.tips = '获取验证码'
					}
				}, 1000)
				uni.request({
					url: this.$apiUrl + 'Auth/sendCode',
					method: 'POST',
					header: {
						token: this.userinfo.token
					},
					data: {
						mobile: this.phonevalue,
					},
					complete: (e) => {
						console.log(e)
					}
				})
			},
			closephone() {
				this.$emit('phone', false);
			},
			surephone() {
				let Exgphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (!Exgphone.test(this.phonevalue)) {
					return uni.showToast({
						icon: 'none',
						title: '手机号码不正确,如需关闭窗口，请点击取消',
						duration: 3000
					})
				}
				if (!this.codevalue) {
					return uni.showToast({
						icon: 'none',
						title: '请输入验证码，如需关闭窗口，请点击取消',
						duration: 3000
					})
				}
				uni.request({
					url: 'https://testtxxzdata.tingxiangzu.com/Douyin/Auth/getPhone',
					method: 'POST',
					header: {
						token: this.userinfo.token
					},
					data: {
						mobile: this.phonevalue,
						code: this.codevalue,
						openId: this.userinfo.openId
					},
					complete: (e) => {
						console.log(e)
						uni.showToast({
							icon: 'none',
							title: e.data.msg
						})
					}
				})
				this.$emit('phone', false);
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}

	.color {
		color: #7f7f7f;
	}

	.phone {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 9999; //999
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(125, 125, 125, 0.3);
	}

	.getPhone {
		width: 90%;
		height: 600rpx;
		border-radius: 24rpx;
		background-color: white;
	}

	.getPhone-logo {
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.getPhone-tip {
		width: 100%;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.getPhone-connet {
		width: 100%;
		height: 240rpx;
	}

	.getPhone-connet-list {
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.getPhone-connet-list-input {
		width: 80%;
		height: 70%;
		border-radius: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f7f7f7;
		font-size: 32rpx;
	}

	.getPhone-connet-list-input-right {
		width: 30%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
	}

	.getPhone-bottom {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.getPhone-bottom-button {
		width: 180rpx;
		height: 60%;
		background-color: #f7f7f7;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 32rpx;
		color: #7f7f7f;
	}
</style>
